<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS-Only Spinning Solar System</title>
  <link rel="stylesheet" href="solar_system.css">
</head>
<body>
    <div class="solar-system">
        <div class="sun"></div>
        <div class="orbit mercury-orbit"><div class="planet mercury" data-name="Mercury"></div></div>
        <div class="orbit venus-orbit"><div class="planet venus" data-name="Venus"></div></div>
        <div class="orbit earth-orbit"><div class="planet earth" data-name="Earth"></div></div>
        <div class="orbit mars-orbit"><div class="planet mars" data-name="Mars"></div></div>
        <div class="orbit jupiter-orbit"><div class="planet jupiter" data-name="Jupiter"></div></div>
        <div class="orbit saturn-orbit"><div class="planet saturn" data-name="Saturn"></div></div>
        <div class="orbit uranus-orbit"><div class="planet uranus" data-name="Uranus"></div></div>
      </div>
  </body>
</html>